<template>
  <el-container style="height:100%">
    <el-header style="height:100px" class="header">
      <img src="../assets/999.png" @click="hl">
    </el-header>
    <el-container>
      <el-aside width="200px" style="background-color:rgb(84,92,100)">

        <el-menu router background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
          <el-submenu :index="String(data.id)" v-for="data in menuData" :key="data.id">
            <template slot="title">
              <i :class="data.icon"></i>
              <span>{{ data.name }}</span>
            </template>
            <el-submenu @click.native="go(c.link)" :index="String(c.link)" v-for="c in data.childMenu" :key="c.id">
              <template slot="title">{{ c.name }}
                <router-link :to="c.link"></router-link>
              </template>
              <el-menu-item @click.native.stop="go(ch.link)" :index="String(ch.link)" v-for="ch in c.childMenu"
                :key="ch.id">{{
        ch.name }}
              </el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-main>
        <!-- <hospital-caruse></hospital-caruse> -->



        <div class="floating-chat-icon">
          <router-link to="/chat">
            <img src="../assets/iChat.png" style="width: 80px; height: 80px;" alt="进入聊天室">
          </router-link>
        </div>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
import HospitalCaruse from './HospitalCaruse.vue'
export default {
  data() {
    return {
      menuData: [],

    }
  },
  methods: {
    queryMenu() {
      //查询用的菜单信息
      this.$axios.get('api/menu/queryMenu')
        .then(res => {
          console.log(res.data)
          if (res.data.code === 200) {
            this.menuData = res.data.data;
          }
        })
    },
    go(link) {
      // 获取当前路由路径
      const currentPath = this.$route.path;
      if (currentPath != '/' + link) {
        this.$router.push({ path: "/" + link })
      } else {
        console.log('');
      }
    },
    hl() {
      location.reload()
    },


  },
  created() {
    this.queryMenu()
  },


  mounted() {
  },
  components: {
    HospitalCaruse
  }
}


</script>

<style>
.header {
  height: 100px;
  background-color: black;
}

.floating-chat-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  transform: translateY(-50%);
  /* 让图标始终在其他元素之上 */
  z-index: 999;  
}
</style>